<template>
  <h2 style="text-align: center;">注册</h2>
  <table>
     <tr>
        <td>账号</td>
        <td><input type="text" placeholder="请输入账号" v-model="userName"></td>
     </tr>
     <tr>
        <td>密码</td>
        <td><input type="password" placeholder="请输入密码" v-model="userPwd"></td>
     </tr>
     <tr>
        <td colspan="2" style="text-align: center;">
          <input type="button" @click="SaveData" value="注册" >
        </td>
     </tr>
  </table>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'
import {useRouter} from 'vue-router'

//创建路由操作实例
const router = useRouter()

//创建注册需要的响应式数据账号,密码
const userName = ref('')
const userPwd = ref('')

//注册
const SaveData = () =>{
    if(userName.value=='')
    {
        alert('请输入账号!')
        return
    }
    if(userPwd.value=='')
    {
        alert('请输入密码!')
        return
    }
      axios({
        url:"https://localhost:44354/api/Users/UserRegister",
        method:"POST",
        data:{
          U_Name:userName.value,
          U_PassWord:userPwd.value
        }
      }).then((res)=>{
           if(res.data>0)
           {
            alert('注册成功!')
            router.push('/Login')
           } else if(res.data==-1)
           {
            alert('账号已存在!')
           } else
           {
             alert('注册失败!')
           }
      }).catch((err)=>{
        console.log(err);
      })
}
</script>